import React from 'react';

var colors=['#049139','#DC2E1C','#E87A06',
        '#251971','#0093DF','#DE237D',
        '#FFF400','#999999','#000000',
        '#ffffff']
, aligns=[
            {icon:'fa fa-align-left',name:'左对齐',cmd:'text-align',cmdval:'left'}
            ,{icon:'fa fa-align-center',name:'居中对齐',cmd:'text-align',cmdval:'center'}
            ,{icon:'fa fa-align-right',name:'右对齐',cmd:'text-align',cmdval:'right'}
        ]
, fonts=[
            {icon:'fa fa-bold',name:'加粗',cmd:'font-weight',cmdval:'bolder'}
            ,{icon:'fa fa-italic',name:'斜体',cmd:'font-style',cmdval:'italic'}
            ,{icon:'fa fa-underline',name:'下划线',cmd:'text-decoration',cmdval:'underline'}
            ,{icon:'fa fa-strikethrough',name:'删除线',cmd:'text-decoration',cmdval:'line-through'}
        ]
, borders=[];

class StyleItem extends React.Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    render(){
        let that=this;
        let basecls='cmd-styles-item opts-values';
        return (
            <div className="opts-font-styles">
            {
                that.props.items.map(e=>{
                    let key,cls;
                    if(!!that.props.color){
                        cls=that.props.state[that.props.color]===e?basecls+' selected':basecls;
                        key=that.props.color+':'+e;
                        let style={backgroundColor:e};
                        return <span key={key} data-cmd={that.props.color} data-cmdval={e} className={cls} style={style} onClick={that.handleClick}></span>
                    }else{
                        cls=that.props.state[e.cmd]===e.cmdval?basecls+' selected':basecls;
                        key=e.cmd+':'+e.cmdval;
                        return <span key={key} data-cmd={e.cmd} data-cmdval={e.cmdval} className={cls} data-tips={e.name} tips-position="top" onClick={that.handleClick}><i className={e.icon}></i></span>
                    }
                })
            }
            </div>
        );
    }
    handleClick(e){
        let el=e.target.tagName.toLowerCase()==='i'?e.target.parentNode:e.target;
        let cmd=el.getAttribute('data-cmd'),
            val=el.getAttribute('data-cmdval');
        let o={};
        o[cmd]=el.className.indexOf('selected')>-1?'':val;
        if(typeof this.props.callback==='function'){
            this.props.callback('styles',o);
        }
    }
}

class Styles extends React.Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    render(){
        return (
            <div className="opts-box">
                <span className="opts-label">字体</span>
                <div className="opts-item">
                    <StyleItem items={fonts} state={this.props.state} callback={this.props.callback}/>
                </div>
                <div className="opts-splitline"></div>
                <span className="opts-label">对齐方式</span>
                <div className="opts-item">
                    <StyleItem items={aligns} state={this.props.state} callback={this.props.callback} />
                </div>
                <div className="opts-splitline"></div>
                <span className="opts-label">字体颜色</span>
                <div className="opts-item">
                    <StyleItem items={colors} color="color" state={this.props.state} callback={this.props.callback} />
                </div>
                <div style={{display:"none"}}>
                    <div className="opts-splitline"></div>
                    <span className="opts-label">边框</span>
                    <div className="opts-item">
                    开发中......
                    </div>
                </div>
                <div className="opts-splitline"></div>
                <span className="opts-label">背景颜色</span>
                <div className="opts-item">
                    <StyleItem items={colors} color="background-color" state={this.props.state} callback={this.props.callback}  />
                </div>
                <div className="opts-splitline"></div>
                <div className="opts-item">
                    <span data-cmd="clean-styles" className="cmd-styles-item opts-values setting-btn" onClick={this.handleClick}>
                    <i className="fa fa-eraser"></i> 清除样式
                    </span>
                </div>
            </div>
        );
    }
    handleClick(e){
        if(typeof this.props.callback==='function'){
            this.props.callback('styles',{
                'font-weight':''
                ,'font-style':''
                ,'text-decoration':''
                ,'text-align':''
                ,'color':''
                ,'background-color':''
            });
        }
    }
}

export default Styles;

